<template>
	<view class="layout bg">
		<view class="header">
			<uv-navbar leftIcon="" :placeholder="true">
			</uv-navbar>
		</view>
		<view class="content">
			<view class="user">
				<view class="info">
					<view class="box">
						<uv-avatar size="60" :src="data.avatar" random-bg-color></uv-avatar>
						<view class="content">
							<view class="nickname">
								<view class="name">
									{{data.nickname}}
								</view>
								<view class="gender">
									<uv-icon v-if="getGender" name="man" color="#007aff" size="23"></uv-icon>
									<uv-icon v-else name="woman" color="#dd524d" size="23"></uv-icon>
								</view>
							</view>
							<view class="id">
								用户ID：{{data.id}}
							</view>
							<view class="ip">
								IP属地：{{data.ip}}
							</view>
						</view>
					</view>
					<view class="link" @click="onGoToUserHome">
						个人主页
						<uv-icon name="arrow-right" color="#808080"></uv-icon>
					</view>
				</view>
				<view class="about">
					<uv-grid :col="3" :border="false">
						<uv-grid-item>
							<text class="num">{{data.followsNum}}</text>
							<text class="text">关注</text>
						</uv-grid-item>
						<uv-grid-item>
							<text class="num">{{data.fansNum}}</text>
							<text class="text">粉丝</text>
						</uv-grid-item>
						<uv-grid-item>
							<text class="num">{{data.albumNum}}</text>
							<text class="text">获赞</text>
						</uv-grid-item>
					</uv-grid>
				</view>
			</view>
			<view class="more">
				<uv-grid :col="4">
					<uv-grid-item>
						<uv-icon class="icon" name="photo" :size="28"></uv-icon>
						<text class="text">动态&作品</text>
					</uv-grid-item>
					<uv-grid-item>
						<uv-icon class="icon" name="star" :size="28"></uv-icon>
						<text class="text">收藏</text>
					</uv-grid-item>
					<uv-grid-item>
						<uv-icon class="icon" name="thumb-up" :size="28"></uv-icon>
						<text class="text">赞过</text>
					</uv-grid-item>
					<uv-grid-item>
						<uv-icon class="icon" name="clock" :size="25"></uv-icon>
						<text class="text">浏览记录</text>
					</uv-grid-item>
				</uv-grid>
			</view>
			<view class="cell">
				<uv-cell-group :border="false">
					<uv-cell :cellStyle="{padding:25+'rpx'}" icon="camera" title="我的约拍" :iconStyle="{fontSize:25+'rpx'}"
						:titleStyle="{fontSize:25+'rpx'}" isLink url="/pages/login/login"></uv-cell>
					<uv-cell :cellStyle="{padding:25+'rpx'}" icon="level" title="个人认证" isLink
						:iconStyle="{fontSize:25+'rpx'}" :titleStyle="{fontSize:25+'rpx'}"
						url="/pages/login/login"></uv-cell>
					<uv-cell :cellStyle="{padding:25+'rpx'}" icon="account" title="实名认证" isLink
						:iconStyle="{fontSize:25+'rpx'}" :titleStyle="{fontSize:25+'rpx'}"
						url="/pages/login/login"></uv-cell>
				</uv-cell-group>
			</view>
			<view class="cell">
				<uv-cell-group :border="false">
					<uv-cell :cellStyle="{padding:25+'rpx'}" icon="question-circle" title="帮助中心"
						:iconStyle="{fontSize:25+'rpx'}" :titleStyle="{fontSize:25+'rpx'}" isLink
						url="/pages/login/login"></uv-cell>
					<uv-cell :cellStyle="{padding:25+'rpx'}" icon="email" title="关于我们" isLink
						:iconStyle="{fontSize:25+'rpx'}" :titleStyle="{fontSize:25+'rpx'}"
						url="/pages/login/login"></uv-cell>
					<uv-cell :cellStyle="{padding:25+'rpx'}" icon="info-circle" title="其他" isLink
						:iconStyle="{fontSize:25+'rpx'}" :titleStyle="{fontSize:25+'rpx'}"
						url="/pages/login/login"></uv-cell>
				</uv-cell-group>
			</view>
			<view class="">
				<button @click="onLogin">登录</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		apiGetUserInfo
	} from '../../urls/user';
	import {
		computed,
		ref
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app"
	const onLogin = () => {
		uni.navigateTo({
			url: "/pages/login/login"
		})
	}
	const data = ref({
		"id": "200200",
		"nickname": "朔风",
		"avatar": "https://yuepai-df5fgre5.oss-cn-guangzhou.aliyuncs.com/defalut-avatar.jpg",
		"telephone": "17306963430",
		"gender": 1,
		"type": 0,
		"description": "一句话也没有留下",
		"email": "1176293852@qq.com",
		"birthday": "2020-09-14 17:45:19",
		"blogNum": 1,
		"albumNum": 1,
		"worksNum": 2,
		"followsNum": 3,
		"fansNum": 4,
		"blogCollectNum": 0,
		"albumCollectNum": 0
	});
	const fetData = async () => {
		try {
			const result = await apiGetUserInfo();
			console.log(result.data);
			data.value = result.data;
		} catch (e) {
			console.log(e);
		}
	}
	onLoad(() => {
		fetData();
	})

	const getGender = computed(() => {
		const {
			gender
		} = data.value;
		return gender === 1;
	})



	const onGoToUserHome = () => {
		console.log('个人主页');
	}
</script>

<style lang="scss" scoped>
	.layout {
		height: 100vh;

		.header {}

		.content {
			padding: 0 25rpx;

			.user {
				background-color: $uni-bg-color;
				padding: 20rpx;
				margin-bottom: 25rpx;
				border-radius: 0 0 10rpx 10rpx;

				.info {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20rpx 0 50rpx;

					.box {
						display: flex;
						align-items: center;

						.content {

							.nickname {
								line-height: 60rpx;
								display: flex;
								align-items: center;
								gap: 5rpx;

								.name {
									font-size: 35rpx;
									font-weight: 600;
								}

								.gender {}
							}

							.id {
								font-size: 25rpx;
								color: $uni-text-color-placeholder;
							}

							.ip {
								font-size: 25rpx;
								color: $uni-text-color-placeholder;
							}
						}

					}

					.link {
						display: flex;
						align-items: center;
						font-size: 25rpx;
						color: $uni-text-color-placeholder;
					}
				}

				.about {
					.num {
						font-size: 25rpx;
						font-weight: 600;
					}

					.text {
						font-size: 26rpx;
					}
				}
			}

			.more {
				background-color: $uni-bg-color;
				padding: 30rpx 20rpx;
				margin-bottom: 25rpx;
				border-radius: 10rpx;

				.icon {
					color: $uni-color-primary !important;
				}

				.text {
					margin-top: 10rpx;
					font-size: 25rpx;
					color: #000;
				}
			}

			.cell {
				background-color: $uni-bg-color;
				margin-bottom: 25rpx;
				border-radius: 10rpx;
			}
		}
	}
</style>